<template>
  <div style="padding: 10px">
      <el-input style="width: 300px" placeholder="请输入名称..." v-model="name1" clearable></el-input>
      <el-button type="primary" @click="search" style="margin-left: 5px">查询数据</el-button>
      <el-button type="primary" @click="handleAdd">新增数据</el-button>
      <el-button type="primary" @click=" getFormation">获取数据</el-button>
      <div style="margin: 10px 0">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column fixed prop="id" label="id" width="150" />
    <el-table-column prop="primary" label="primary" width="150" />
    <el-table-column prop="username" label="username" width="190" />
    <el-table-column prop="password" label="password" width="190" />
    <el-table-column prop="phone" label="phone" width="190" />
    <el-table-column prop="idPerson" label="idPerson" width="190" />
    <el-table-column prop="email" label="email" width="190" />
              <el-table-column label="操作" width="125">
                  <template #default="scope">
                      <el-button link type="primary" size="small" @click="handleEdit(scope.row,scope.$index) ">编辑
                      <!-- <el-button link type="primary" size="small" @click="handleEdit ">编辑 -->
                      </el-button>
                      <el-button link type="danger" size="small" @click.prevent="remove(scope.$index)">删除</el-button>
                  </template>
              </el-table-column>
          </el-table>
      </div>
      <!-- 分页查询 page size 当前页展示信息数量 total 总数量 change 当前页数改变时候触发 -->
      <el-pagination
     :page-size="student.pageSize" 
    :pager-count="11"
    layout="prev, pager, next"
    :total="student.pageTotal"
    @current-change="changePage"
  >
    </el-pagination>
      <!--弹窗新增信息-->
      <el-dialog v-model="dialogFormVisible" title="信息" width="40%">
          <el-form :model="form" label-width="100px" style="padding-right:30px ">
              <el-form-item label="id">
                  <el-input v-model="form.id" autocomplete="off"/>
              </el-form-item>
              <el-form-item label="primary">
                  <el-input v-model="form.primary" autocomplete="off"/>
              </el-form-item>
              <el-form-item label="username">
                  <el-input v-model="form.username" autocomplete="off"/>
                </el-form-item>
              <el-form-item label="password">
                  <el-input v-model="form.password" autocomplete="off"/>
                </el-form-item>
              <el-form-item label="phone">
                  <el-input v-model="form.phone" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="idPerson">
                  <el-input v-model="form.idPerson" autocomplete="off"/>
                </el-form-item>
              <el-form-item label="email">
                  <el-input v-model="form.email" autocomplete="off"/>
              </el-form-item> /
          </el-form>
          <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="postFormation">确认</el-button>
    </span>
          </template>
      </el-dialog>
      <!-- 弹框编辑信息 -->
      <el-dialog v-model="AdialogFormVisible" title="信息" width="40%">
          <el-form :model="form" label-width="100px" style="padding-right:30px ">
              <el-form-item label="id">
                  <el-input v-model="form.id" autocomplete="off"/>
              </el-form-item>
              <el-form-item label="primary">
                  <el-input v-model="form.primary" autocomplete="off"/>
              </el-form-item>
              <el-form-item label="username">
                  <el-input v-model="form.username" autocomplete="off"/>
                </el-form-item>
              <el-form-item label="password">
                  <el-input v-model="form.password" autocomplete="off"/>
                </el-form-item>
              <el-form-item label="phone">
                  <el-input v-model="form.phone" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="idPerson">
                  <el-input v-model="form.idPerson" autocomplete="off"/>
                </el-form-item>
              <el-form-item label="email">
                  <el-input v-model="form.email" autocomplete="off"/>
              </el-form-item> /
          </el-form>
          <template #footer>
    <span class="dialog-footer">
      <el-button @click="AdialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="ApostFormation">确认</el-button>
    </span>
          </template>
      </el-dialog>
  </div>
</template>
<script >

  import {reactive, ref} from "vue";
  import axios from '@/utils/request';
  export default{
    data(){
      return{  
        student:{  pageSize: 10,
        pageTotal:1600,
        pagenum:2,},
   dialogFormVisible: ref(false),
   AdialogFormVisible: ref(false),
   form : reactive({}),
   globalIndex : ref(-1),
   name1: ref(''),
value:ref(''),
  tableData:[
  ]
      }
    },
    methods: {
    //新增数据 设置新的空的绑值对象 打开弹窗
   handleAdd (){
      this.form = reactive({})
      //打开弹窗
      this.dialogFormVisible = true
  },
    //编辑数据 先赋值到表单再弹窗
    handleEdit(row, index){
    //   const params={      
    //   id: this.tableData[index].id,
    // primary: this.tableData[index].primary,
    //   username: this.tableData[index].username,
    //   password: this.tableData[index].password,
    //   phone: this.tableData[index].phone,
    //   idPerson: this.tableData[index].idPerson,
    //   email: this.tableData[index].email,
    //   }
    //   axios.post('//upd',JSON.stringify(params)).then(res=>{
    //                 console.log(res);
    //                 if (res.code===200)
    //                 {	console.log('请求成功:')
		// 			console.log('respnse',res)

    //             }})
      const newObj = Object.assign({}, row)
      this.form = reactive(newObj)
      //把当前编辑的行号赋值给全局保存的行号
      this.globalIndex = index
      // console.log(this.globalIndex)
      this.AdialogFormVisible = true
  },
    //删除数据 从index位置开始，删除一行即可
  remove(index){
    console.log(this.tableData[index]);
    // const params={      
    //   id: this.tableData[index].id,
    // // primary: this.tableData[index].primary,
    // //   username: this.tableData[index].username,
    // //   password: this.tableData[index].password,
    // //   phone: this.tableData[index].phone,
    // //   idPerson: this.tableData[index].idPerson,
    // //   email: this.tableData[index].email
    //   }
      // axios.post('/del',JSON.stringify(this.tableData[index].id)).then(res=>{
      axios.post('/posts',JSON.stringify(this.tableData[index].id)).then(res=>{
                    console.log(res);
                    if (res.code===200)
                    {	console.log('请求成功:')}})
    //请求完成后删除同时这一行
    this.tableData.splice(index, 1)
    }
,
    //查询数据
   search(){
      console.log(this.name1);
      const params={
        idPerson:this.name1
      }
      // axios.post('/find',JSON.stringify(params)).then(res=>{
      axios.post('/posts',JSON.stringify(params)).then(res=>{
                    console.log(res);
                    if (res.code===200)
                    {	console.log('请求成功:')}})
  },
  // 获取信息
  getFormation(){
      axios.get('/posts').then(res=>{
                    console.log(res);
                    this.tableData=res
                if (res.code==200) {
                  this.tableData=res.data//响应成功获取数据
                    console.log(res);
                }
            })
    },
    //增加数据的发送函数
    postFormation(){
      if (this.globalIndex>= 0) {
          //表示编辑
          this.tableData[this.globalIndex] = this.form
          //还原回去
          this.globalIndex = -1
      } else {
          //新增
          this.tableData.push(this.form)
          this.dialogFormVisible = false
      }
      const params={
          id: this.form.id,
    primary: this.form.primary,
      username: this.form.username,
      password: this.form.password,
      phone: this.form.phone,
      idPerson: this.form.idPerson,
      email: this.form.email, 
				}
        console.log(params);
        // axios.post('/ins',JSON.stringify(params)).then(res=>{
        axios.post('/posts',JSON.stringify(params)).then(res=>{
                    console.log(res);
                    if (res.code===200)
                    {	console.log('请求成功:')}})
        this.dialogFormVisible = false
    },
    // 更新发送信息函数
    ApostFormation(){
      if (this.globalIndex>= 0) {
          //表示编辑
          this.tableData[this.globalIndex] = this.form
          //还原回去
          this.globalIndex = -1
      } else {
          //新增
          this.tableData.push(this.form)
          this.AdialogFormVisible = false
      }
      const params={
          id: this.form.id,
    primary: this.form.primary,
      username: this.form.username,
      password: this.form.password,
      phone: this.form.phone,
      idPerson: this.form.idPerson,
      email: this.form.email, 
				}
        console.log(params);
        // axios.post('/upd',JSON.stringify(params)).then(res=>{
        axios.post('/posts',JSON.stringify(params)).then(res=>{
                    console.log(res);
                    if (res.code===200)
                    {	console.log('请求成功:')}})
        this.AdialogFormVisible = false
    },
    load()
        {
            axios.post("/page",this.student).then(res=>{
                this.student.pageTotal=res.data.total
                this.tableData=res.data.list;
            })
        },
        changePage(pageNum){
          console.log(pageNum);
            this.student.pagenum=pageNum
            this.load();
        }
  },
  // created() {
  //       this.load();
  //     }
    }
</script>